<template>
  <div class="uploadContainer"
       v-loading='loading'>

    <div class="cropper"
         id="copperBox">
      <vueCropper ref="cropper"
                  :img="option.img"
                  :outputSize="option.size"
                  :outputType="option.outputType"
                  :info="true"
                  :full="option.full"
                  :canMove="option.canMove"
                  :canMoveBox="option.canMoveBox"
                  :original="option.original"
                  :autoCrop="option.autoCrop"
                  :autoCropWidth="option.autoCropWidth"
                  :autoCropHeight="option.autoCropHeight"
                  :fixedBox="option.fixedBox">
      </vueCropper>
    </div>
    <div class="footer-btn">
      <div class="scope-btn">
        <label class="btn"
               for="uploads"
               style='background: dodgerblue;'>选择图片</label>
        <input type="file"
               id="uploads"
               style="position:absolute; clip:rect(0 0 0 0);"
               accept="image/png, image/jpeg, image/gif, image/jpg"
               @change="uploadImg($event, 1)">
        <p class="btn"
        style="padding:0;color:#fff;"
           @click="changeScale(1)">+</p>
        <p class="btn"
         style="padding:0;color:#fff;"
           @click="changeScale(-1)">-</p>
        <p class="btn"
         style="padding:0;color:#fff;"
           @click="rotateLeft">↺</p>
        <p class="btn"
         style="padding:0;color:#fff;"
           @click="rotateRight">↻</p>
      </div>
      <div class="upload-btn" >
        
        <p class="btn"
         style="padding:0;color:#fff;margin-top:10px;"
           @click="startUpload()">确定</p>
        <p class="btn"
         style="padding:0;opacity: 0.5;color:#fff;margin-top:10px;"
           @click='cancelUpload'>取消</p>
      </div>
    </div>
  </div>
</template>
<script>
import config from "../../config.js";
import VueCropper from 'vue-cropper'
export default {
  data () {
    return {
      crap: false,
      option: {
        img: '',
        size: 1,
        full: false,
        outputType: 'png',
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 160,
        autoCropHeight: 160,
        fixedBox: true,
        downImg: '#'
      },
      loading: false,
    }
  },

  methods: {
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    finish (type) { // 输出
      var test = window.open('about:blank')
      test.document.body.innerHTML = '图片生成中..'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          var img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    cancelUpload () {
      this.$emit('success', false);
    },
    startUpload () {
      this.loading = true
      this.$refs.cropper.getCropBlob((data) => {
        let uploadFile = document.getElementById("uploads").files[0];
        let formFile = new FormData();
        formFile.append("file", uploadFile)
        var url = config.baseUrl + 'emergency/v1.0/personal/photos?userId=' + localStorage.userid
        this.$axios.post(url, formFile, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((res) => {
          this.loading = false
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message)
            this.$emit('success', false);
            this.option.img = ''
          } else {
            this.$message.warning(res.data.meta.message)
          }
        }).catch(response => {
          console.log(response);
        });
      })
    },
    uploadImg (e, num) { 
      this.option.img
      var file = e.target.files[0]

      this.test = file

      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      };
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') { 
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.option.img = data
        } else if (num === 2) {
          this.example2.img = data
        }
      } 
      reader.readAsDataURL(file) 
    }
  }
}
</script>
<style type="text/less">
.uploadContainer {
  height: 300px;
  width: 100%;
}
.btn {
  width: 80px;
  line-height: 30px;
  border-radius: 2px;
  float: left;
  padding: 0;
  background: #2db0fd;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}
.btn:hover {
  cursor: pointer;
}
.scope-btn {
  width: 450px;
  margin: 30px auto;
}
.upload-btn {
  width: 200px;
  margin:0 auto;
}
#copperBox {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: #000;
  position: relative;
  overflow: hidden;
}
</style>